<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>EasyUI调研 综合DEMO</title>
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo/demo.css">
    <script type="text/javascript" src="../jquery.min.js"></script>
    <script type="text/javascript" src="../jquery.easyui.min.js"></script>
</head>
<body>
<h2>EasyUI调研 综合DEMO</h2>
<div style="border: solid 1px;width: 500px;">
    <h3>调测信息:</h3>
    <div id="testInfo"></div>
</div>

<div style="border: solid 1px; width: 500px; margin-top: 5px;">
    使用说明：<br>
    1.增加行：将在表格末尾新增一行空的数据<br>
    2.删除行：选定一行后进行删除<br>
    3.点击单元格可进行数值修改<br>
    <br>
    4.上述3个操作进行后都只是在前端进行缓存，如果确认无误，还需要点击“保存修改”，将变更保存至数据库<br>
    5.在进行“保存修改”前，可以点击“撤销修改”，将会把所有未保存操作撤销<br>
</div>

<div style="margin:20px 0;"></div>

<table id="dg" class="easyui-datagrid" title="可编辑数据表" style="width:500px;height:350px;"
       data-options="
				iconCls: 'icon-edit',
				singleSelect: true,
				toolbar: '#tb',
				onClickCell: onClickCell
			">

    <thead>
    <tr>
        <th data-options="field:'id',width:80">ID</th>
        <th data-options="field:'assets',width:80,align:'right',editor:'numberbox'">资产</th>
        <th data-options="field:'liabilities',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}">负债</th>
        <th data-options="field:'owners_equity',width:80,align:'right',editor:'numberbox'">所有者权益</th>
    </tr>
    </thead>
</table>

<div id="tb" style="height:auto">
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="append()">增加行</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="removeit()">删除行</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="accept()">保存修改</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="reject()">撤销修改</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="getChanges()">查看修改</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="getAllData()">当页数据</a>
</div>

<br>
<button type="button" onclick="history.go(0);">刷新</button>

<script src="index.js"></script>
</body>
</html>